<script setup lang="ts">
import {ref} from "vue";

let ph = ref(document.documentElement.clientHeight)
</script>

<template>

  <el-container>
    <el-header>FACE-OPENSEARCH-FRONTEND</el-header>
    <el-container>
      <div>
<!--        :style="{'height': ph-70 + 'px'}"-->
        <el-menu
            :style="{'height': ph-70 + 'px'}"
            class="menu"
            active-text-color="#ffff7f"
            text-color="#ffffff"
            background-color="#444444"
            default-active="/collection"
            router
        >
          <el-menu-item index="/collection">
            <el-icon><Menu/></el-icon>
            <template #title>集合管理</template>
          </el-menu-item>
          <el-menu-item index="/sample">
            <el-icon><User/></el-icon>
            <template #title>人脸样本和数据管理</template>
          </el-menu-item>
          <el-menu-item index="/face/compare">
            <el-icon><Connection /></el-icon>
            <template #title>人脸1v1比对</template>
          </el-menu-item>
          <el-menu-item index="/face/search">
            <el-icon><Search/> </el-icon>
            <template #title>人脸M:N搜索</template>
          </el-menu-item>
        </el-menu>
      </div>
      <el-main id="m">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>

</template>


<style scoped>
.el-header {
  background-color: #c7d5e0;
  line-height: 60px;
  text-align: center;
}

.menu {
  width: 200px;
}
::-webkit-scrollbar {
  display: none;
}


</style>